<template>
    <div class="table">
        <div class="container">
            <div class="but">
                <router-link :to="{path:'keywordSearch',query:{select:this.select}}">
                    <el-button size="mini">
                        返回
                    </el-button>
                </router-link>
            </div>
            <el-row :gutter="20">
                <el-col :span="18">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="ul">
                                        <ul>
                                            <li v-for="(item,index) in Data" @click="selected(item,index)"
                                                :class="{active:index==isActive}">第{{index +1}}条
                                            </li>
                                        </ul>
                                    </div>
                                </el-col>
                                <el-col :span="20">
                                    <el-input
                                        resize="none"
                                        type="textarea"
                                        :rows="10"
                                        v-model="textarea">
                                    </el-input>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="24">
                            <div class="participle">
                                <div class="div1">
                                    <el-button size="mini" @click="participle">分词</el-button>
                                </div>
                                <div class="div2">
                                    <span v-for="text in text" :class="text.color">{{text.textvalue}}</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6">
                    <div class="tags">
                        <div class="tag1" v-for="tag in ta_tags">
                            <el-tooltip class="item" effect="dark" :content="tag.Symblist" placement="right">
                                <h3>{{tag.textvalue}}</h3>
                            </el-tooltip>
                            <span v-for="(list,index) in tag.taglist">
                                <span class="tags_span1">{{list}} </span>
                                <span v-if="index < tag.taglist.length-1"><i class="el-icon-arrow-right"></i></span>
                            </span>
                        </div>

                        <div class="tag" v-for="tag in tags">
                            <el-tooltip class="item" effect="dark" :content="tag.Symblist" placement="right">
                                <h3>{{tag.textvalue}}</h3>
                            </el-tooltip>
                            <span v-for="(list,index) in tag.taglist">
                                <span class="tags_span">{{list}} </span>
                                <span v-if="index < tag.taglist.length-1"><i class="el-icon-arrow-right"></i></span>
                            </span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                textarea: '',
                isActive: 0,
                Data: [],
                /*获取token*/
                access_token: '',
                text: [],
                tags: [],
                ta_tags: [],
                /*回退*/
                select:'',
            }
        },
        created() {
            this.gainTtoken();
        },
        methods: {
            /*获取token*/
            gainTtoken() {
                this.$axios({
                    method: 'GET',
                    url: 'http://bigdata-oauth.huimeimt.cn/Dataplatform/token',
                }).then((res) => {
                    this.access_token = res.data.access_token;
                    this.select = this.$route.query.select;
                    this.$axios({
                        method: 'GET',
                        url: 'http://bigdata-api.huimeimt.cn/resource_server/tiebamdm/query_info/' + this.$route.query.id + "?access_token=" + this.access_token,
                    }).then((res) => {
                        if (res.data.result != "") {
                            this.Data = res.data.result[0].reply;
                            this.textarea = res.data.result[0].reply[0].content;
                            this.Data.forEach((a) => {
                                if (a.reply.length > 0) {
                                    for (var i = 0; i < a.reply.length; i++) {
                                        this.Data.push(a.reply[i]);
                                    }
                                }
                            });
                        }
                    })
                })
            },
            /*选中*/
            selected(item, index) {
                this.isActive = index;
                this.textarea = item.content;
            },
            /*分词*/
            participle() {
                this.$axios({
                    method: 'POST',
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    url: "http://58.132.170.143:6005/processtext",
                    data: JSON.stringify(this.textarea),
                }).then((res) => {
                    this.text = res.data.splitwords;
                    this.tags = res.data.tags;
                    this.ta_tags = res.data.ta_tags;
                }).catch((err) => {
                    console.log(err);
                });
            }
        },
    }
</script>

<style scoped>
    .ul {
        height: 200px;
        overflow-x: hidden;
        overflow-y: scroll;
        line-height: 30px;
        text-align: center;
        border: 1px solid #dcdfe6;
        border-radius: 5px;
    }

    .ul::-webkit-scrollbar {
        display: none;
    }

    ul, li {
        margin: 0px;
        padding: 0px;
    }

    li {
        list-style: none;
        background: #dcdfe6;
        margin: 2px 0;
        font-weight: 600;
        font-size: 15px;
    }

    li:hover {
        background: #00bca0;
    }

    .active {
        background: #00bca0;
    }

    .participle > .div1 {
        padding: 20px 0
    }

    .participle > .div2 {
        border: 1px solid #dcdfe6;
        min-height: 300px;
        border-radius: 5px;
        padding: 10px;
    }

    .participle > .div2 > span {
        padding-right: 10px
    }

    .tags {
        height: 594px;
        overflow-x: hidden;
        overflow-y: scroll;
        border: 1px solid #dcdfe6;
        border-radius: 5px
    }

    .tags::-webkit-scrollbar {
        display: none;
    }

    /*二排*/
    .tags .tag {
        padding: 5px 15px
    }

    .tags .tag > h3 {
        color: #00bca0
    }

    .tags .tags_span {
        color: #fff;
        display: inline-block;
        background: #00bca0;
        padding: 3px 5px;
        border-radius: 5px;
        margin: 4px 0;
        font-size: 12px
    }

    /*一排*/
    .tags .tag1 {
        padding: 5px 15px
    }

    .tags .tag1 > h3 {
        color: red
    }

    .tags .tags_span1 {
        color: #fff;
        display: inline-block;
        background: red;
        padding: 3px 5px;
        border-radius: 5px;
        margin: 4px 0;
        font-size: 12px
    }

    .black {
        color: #ccc;
    }

    .red {
        color: #00bca0;
        font-weight: bold;
    }

    .green {
        color: red;
        font-weight: bold;
    }

    .but {
        padding-bottom: 20px;
    }
</style>
